<template>
    <div>
        <h1>监听ref的单个属性</h1>
       <h2>{{num}}</h2>
       <button @click="increment">+</button>
    </div>
</template>

<script>
/* 
  watch监听单个ref函数定义的响应式数据
  语法
  watch(参数1，参数2，参数3)
  参数1：所要监听的ref的响应式数据
  参数2：watch的handler函数
  参数3：其他的配置
*/
import { ref,watch } from 'vue'
export default {
    setup(){
        let num=ref(0)
        const increment=()=>{
            num.value++ 
        }
        watch(num,(newval,oldval)=>{
            console.log(newval,oldval);
        },{immediate:true})
        return {num,increment}
    }
}
</script>

<style>

</style>